<script setup>
import { ref } from 'vue'
import { uploadFile, getFileDataURL } from '@/plugins/util.js'
import { useUser } from '@/composition/useUser'

const { loginModel, user, login, loggedIn, logout } = useUser();

const fileInput = ref(null);

const click = () => {
    fileInput.value.click();
}


//暴露play方法
defineExpose({
    click,
});

const emit = defineEmits(['upLoadSuccess']);

// const props = defineProps({
//     confirmCallback: {
//         type: Function
//     },
//     cancelCallback: {
//         type: Function
//     },
// });

const fileSelChange = async () => {
    // console.log(fileInput.value)
    if (fileInput.value == null || fileInput.value == undefined) {
        return;
    }
    if (loggedIn.value) {
        // login file => upload
        const fileUrl = await uploadFile(fileInput.value.files[0]);
        console.log('fileUrl:', fileUrl);
        emit("upLoadSuccess", fileUrl);
    } else {
        // no login, file => base64
        getFileDataURL(fileInput.value.files[0]).then((fileUrl) => {
            emit("upLoadSuccess", fileUrl);
        })
    }
}


</script>

<template>
    <div>
        <input hidden type="file" name="file" ref="fileInput" @change="fileSelChange()">
    </div>
</template>

<style scoped>
* {
    display: none !important;
}
</style>
